<template>
	<view class="morePj">
		<mescroll-uni class="morePjBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption" :bottombar="false">
			<view class="pL15 pR15 pT15 pB15">
				<view class="pjTop flex alg-center jst-between">
					<view class="flex alg-center">
						<view class="u-yellow font24">{{pjInfo?.source}}</view>
						<view class="mL5">
							<view class="flex">
								<image class="imgW24" :key="i" v-for="(item,i) in pjInfo?.startCount"
									:src="resources.star" mode=""></image>
							</view>
							<view class="font15 mT10">{{pjInfo?.count}} 条评价</view>
						</view>
					</view>
					<view>
						<view class="flex alg-center font13">
							<text class="mR5">好评</text>
							<view style="width: 160rpx;"><u-line-progress :show-percent="false" :height="16"
									:percent="xf.getPer(pjInfo?.satisfaction3)" :inactive-color="'#F0F0F0'"
									:active-color="'#FF9C00'"></u-line-progress></view>
							<text class="mL5">{{pjInfo?.satisfaction3}}</text>
						</view>
						<view class="flex alg-center font13 mT10">
							<text class="mR5">中评</text>
							<view style="width: 160rpx;"><u-line-progress :show-percent="false" :height="16"
									:percent="xf.getPer(pjInfo?.satisfaction2)" :inactive-color="'#F0F0F0'"
									:active-color="'#FF9C00'"></u-line-progress></view>
							<text class="mL5">{{pjInfo?.satisfaction2}}</text>
						</view>
						<view class="flex alg-center font13 mT10">
							<text class="mR5">差评</text>
							<view style="width: 160rpx;"><u-line-progress :show-percent="false" :height="16"
									:percent="xf.getPer(pjInfo?.satisfaction)" :inactive-color="'#F0F0F0'"
									:active-color="'#FF9C00'"></u-line-progress></view>
							<text class="mL5">{{pjInfo?.satisfaction}}</text>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap mT10">
					<view @click="changePjTab(item,i)" :class="checkPjTab==i?'active':''" class="pjTabItem font14"
						v-for="(item,i) in pjTab" :key="i">
						<text>{{item.text}}</text>
						<text class="u-9">{{item.count}}</text>
					</view>
				</view>
				<view class="mT15 bgf radius20 pL12 pR12 pB25">
					<view class="pjItem flex pT15 pB15" v-for="(item,i) in list" :key="i">
					<u-image v-if="item.comOrUserProfile" :borderRadius="20" :width="80" :height="80" class="pjHeader" :src="xf.getImgUrl(item.comOrUserProfile)" mode=""></u-image>
					<u-image v-else :width="80" :height="80" class="pjHeader" :src="resources.defaultHeader" mode=""></u-image>
					
						<view class="pjItemRight mL10">
							<view class="flex alg-center jst-between">
								<view class="font15 bold">{{item.izAnonymous==1?'匿名用户':item.evaluatorName}}</view>
								<view class="font12 u-9">
									{{item.evaluationTime}}
								</view>
							</view>
							<view class="flex mT5 alg-center">
								<image v-for="(v,z) in xf.getMathCeil(item.evaluationScore)" :key="z" class="w24"
									:src="resources.star" mode=""></image>
									<text class="mL5 font12 u-org bold">{{item.evaluationScore}}</text>
							</view>
							<view class="font15 line24 mT10">
								{{item.evaluationConent}}
							</view>
							<view v-if="item.evaluationImage" class="flex flex-wrap mT10">
								<u-image class="mR10 mB10" :width="160" :height="160" :borderRadius="20"  @click="xf.previewImg([xf.getImgUrl(v)])" v-for="(v,j) in xf.getArr(item?.evaluationImage)" :key="j" :src="xf.getImgUrl(v)" mode=""></u-image>
												
								
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</mescroll-uni>
	
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		commentTop,
		commentLisTab
	} from "@/api/userInterface/job.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				checkecdLis:[],
				pjLis:[],
				pjTab: [{value:'',text:"全部",count:0}],
				pjInfo:{},
				list: [],
				checkPjTab: 0,
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
			}
		},
		onLoad(e) {
			this.id=e.id;
			this.getTpjTop(e.id)
		},
		methods: {
			getTpjTop(id){
				commentTop({xfOddGeneralId:id}).then(async res=>{
					this.pjInfo=res.result;
					this.pjInfo.startCount=res.result.source&&Math.ceil(res.result.source)
					let d= await this.baseStore.getDictionaryDataAll('jjp_oddjob_often');
					d.map(v=>{
						let count = this.pjInfo.commonList[""+v.value+""];
						if(count){
							this.pjTab.push({...v,count:count})
						}	
					})
					
				})
			},
			
			//切换企业评价
			changePjTab(v, i) {
				this.checkPjTab = i;
				this.checkecdLis=v.value?[v.value]:[];
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				if (page.num == 1) this.list = [];
				commentLisTab({xfOddGeneralId:this.id,evaluationCommonSentences:this.checkecdLis,pageSize:10,pageNo:page.num}).then(res => {
					let list = res.result.records;
					this.pjTab[0].count=res.result.total;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endErr();
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		/* #ifdef MP-WEIXIN */
		  height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F8FAFF, #F7F8FB);
	}
</style>
<style lang="scss" scoped>
	
	.morePj{
		/* #ifdef MP-WEIXIN */
		  height: 100%;
		/* #endif */
		background: #F8F8F8;
	}
	.pjTop {

		padding: 30rpx;
		background: #F7FBFF;
		border-radius: 20rpx;
		border: 3px solid #FFFFFF;
	}

	.pjTabItem {
		line-height: 68rpx;
		padding: 0 20rpx;
		height: 68rpx;
		min-width: 140rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
		.u-9 {
			padding-left: 4rpx;
		}

		&.active {
			background: #EAF4FE;
			color: #3291F8;

			.u-9 {
				color: #3291F8;
			}
		}
	}

	.pjItem {
		border-bottom: 2rpx solid #F6F6F6;

		.pjItemRight {
			width: calc(100% - 100rpx);
		}
	}
	.mescroll-uni{
		background: linear-gradient(0deg, #F8FAFF, #F7F8FB);
	}
	.pjHeader {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}
</style>